<template>
  <div class="">
    <!-- 搜索  -->
    <SearchCard>
      <a-form
        ref="formRef"
        :model="queryParams"
        :onFinish="onFinish"
        layout="inline"
      >
        <a-form-item
          :label="$t('routes.topic.query.department')"
          name="classificationName"
        >
          <a-input v-model:value="queryParams.classificationName" />
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" type="primary">{{ $t('common.okText') }}</a-button>
          <a-button class="ml-4" type="default" @click="resetForm">{{ $t('common.resetText') }}</a-button>
        </a-form-item>
      </a-form>
    </SearchCard>


    <!--  操作 -->
    <ControlsCard>
      <a-button type="primary" @click="handleAdd">{{ $t('common.addText') }}</a-button>
    </ControlsCard>

    <!-- 表格 -->
    <a-table
      :bordered="true"
      :columns="columns"
      :dataSource="list"
      :loading="loading"
      :pagination="false"
      childrenColumnName="lowerLevelClassifications"
      rowKey="classificationId"
    >
      <template #bodyCell="{ column, record ,text}">
        <div :style="{ color: getBackgroundColor(record) }">
          <span>
            {{ text }}
          </span>
          <span v-if="column.key === 'classificationId'">
            ({{ record.lowerLevelClassifications && record.lowerLevelClassifications.length ? record.lowerLevelClassifications.length : 0
            }})
          </span>
        </div>
        <template v-if="column.key === 'operation'">
          <a-popconfirm :cancel-text="$t('common.cancelText')" :ok-text="$t('common.okText')"
                        :title="$t('common.conDel')"
                        @confirm="confirm(record)">

            <a href="#">{{ $t('common.delText') }}</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <!-- 分页  -->
    <Pagination
      v-model:pageNum="queryParams.pageNum"
      v-model:pageSize="queryParams.pageSize"
      :total="total"
      class="flex justify-end mt-5"
      @pagination="getList()"
    />


    <!-- 表单 -->
    <FormData v-model:open="open" :options="classList" :title="title" @callback="getList()"></FormData>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Pagination } from '@/components/basic/Pagination'
import { ControlsCard, SearchCard } from '@/components/basic/Card'
import { FormData } from '@/components/business/tkmgr/topic/FormData'
import Api from '@/api'
import { to } from '@/utils/awaitTo'
import { useI18n } from '@/hooks/useI18n'
import { classTopicDelete } from '@/api/backend/api/topic'

const { t } = useI18n()


// 自定义数据
const columns = [
  {
    title: 'ID',
    dataIndex: 'classificationId',
    key: 'classificationId',
    align: 'center'
  },
  {
    title: t('routes.topic.table.dep'),
    dataIndex: 'classificationName',
    key: 'classificationName',
    align: 'center'
  },
  {
    title: t('common.operation'),
    dataIndex: 'operation',
    key: 'operation',
    align: 'center'
  }
]


// 响应式数据
const formRef = ref()
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  classificationName: ''
})
const list = ref([])
const total = ref(0)
const loading = ref(false)
const open = ref(false) // 开关
const title = ref('')
const classList = ref([
  { classificationId: 0, classificationName: t('routes.topic.allText'), lowerLevelClassifications: [] }
])


// 列表方法
const getList = async () => {
  loading.value = true
  const { code, rows, total: page } = await Api.topic.classTopicFirst(queryParams).catch((error) => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
  if (code === 200) {
    console.log(rows)
    list.value = rows
    total.value = Number(page)
  }
}

// 搜索确定
const onFinish = (values: any) => {
  console.log('Success:', values)
  getList()
}

// 重置
const resetForm = () => {
  formRef.value.resetFields()
  getList()
}

// 新增按钮
const handleAdd = () => {
  open.value = true
  title.value = t('common.addText')
}


// 获取分类列表
const getClassList = async () => {
  const [error, data] = await to(Api.topic.classTopicList({}))
  if (!error) {
    classList.value[0].lowerLevelClassifications = data ? data : []
  }
}

// 确定删除
const confirm = async (item) => {
  const ids = new Array(item.classificationId)
  const [error] = await to(classTopicDelete(ids))
  if (!error) {
    await getList()
  }
}

// 背景色
const getBackgroundColor = (level) => {
  return level.parentId ? '#4caf50' : '#f44336'
}

getList()
getClassList()
</script>

<style lang="less" scoped>

</style>
